<template>
  <div>
    <input type="radio" name="select" value="单选" @click="selectSingle=true">
    <input type="radio" name="select" value="多选" @click="selectSingle=false">
    <PanelGroup
      :select-single="selectSingle"
      :data="filtedData"
      :show-icon="showIcon"
      :filter="filterValue"
      :tree-model="treeModel"
      :expand="expand"
      :list-model="listModel"
      :placeholder="placeholder"
      :show-filter="showFilter"
      :show-footer="showFooter"
      :show-taggle="showTaggle"
      :table-model="tableModel"
      :table-template="tableTemplate"
      :tile-model="tileModel"
      :tree-template="treeTemplate"
      class="test"
    />
  </div>
</template>

<script>
export default {
  components: {
    PanelGroup: () => import('@components/PanelGroup.vue')
  },
  data() {
    return {
      selectSingle: true,
      filtedData: [
        { 'id': 'spec_cda', 'uid': 'b3cf2e4c-b008-4305-a8c8-2250fb213c63', 'flag': true, 'name': 'cda功率比标准曲线', 'layer': 0, 'value': null, 'branch': 'b3cf2e4c-b008-4305-a8c8-2250fb213c63', 'root_id': 'spec_cda', 'root_uid': 'b3cf2e4c-b008-4305-a8c8-2250fb213c63', 'parent_id': null, 'root_flag': true, 'root_name': 'cda功率比标准曲线', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'spec_cop', 'uid': 'f55088e8-fe52-4ce2-9b2b-0a6f2e477815', 'flag': true, 'name': 'cop制热能效比标准曲线', 'layer': 0, 'value': null, 'branch': 'f55088e8-fe52-4ce2-9b2b-0a6f2e477815', 'root_id': 'spec_cop', 'root_uid': 'f55088e8-fe52-4ce2-9b2b-0a6f2e477815', 'parent_id': null, 'root_flag': true, 'root_name': 'cop制热能效比标准曲线', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'opc', 'uid': '554d18b9-1d6e-4d5f-8c5e-20232e562532', 'flag': false, 'name': 'OPC信息', 'layer': 1, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f,554d18b9-1d6e-4d5f-8c5e-20232e562532', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': 'category', 'root_flag': true, 'root_name': '类别信息', 'parent_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'root_value': null, 'category_id': 'category', 'parent_flag': true, 'parent_name': '类别信息', 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'websocket', 'uid': '2fa593b2-287d-4276-ac92-47670b7d2b5b', 'flag': true, 'name': 'websocket配置', 'layer': 0, 'value': null, 'branch': '2fa593b2-287d-4276-ac92-47670b7d2b5b', 'root_id': 'websocket', 'root_uid': '2fa593b2-287d-4276-ac92-47670b7d2b5b', 'parent_id': null, 'root_flag': true, 'root_name': 'websocket配置', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'tag', 'uid': '2043674c-851e-4137-8d12-424cc87ad879', 'flag': false, 'name': '参数', 'layer': 1, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f,2043674c-851e-4137-8d12-424cc87ad879', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': 'category', 'root_flag': true, 'root_name': '类别信息', 'parent_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'root_value': null, 'category_id': 'category', 'parent_flag': true, 'parent_name': '类别信息', 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'point', 'uid': '74b2283d-f8b4-470a-85b0-9798a0d50612', 'flag': false, 'name': '点位', 'layer': 1, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f,74b2283d-f8b4-470a-85b0-9798a0d50612', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': 'category', 'root_flag': true, 'root_name': '类别信息', 'parent_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'root_value': null, 'category_id': 'category', 'parent_flag': true, 'parent_name': '类别信息', 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'machine', 'uid': '996d79df-b219-4710-be5f-819e2e691d9f', 'flag': false, 'name': '机器', 'layer': 1, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f,996d79df-b219-4710-be5f-819e2e691d9f', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': 'category', 'root_flag': true, 'root_name': '类别信息', 'parent_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'root_value': null, 'category_id': 'category', 'parent_flag': true, 'parent_name': '类别信息', 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'building', 'uid': '59b8ebc6-7903-4a6b-b95a-6e45057258f6', 'flag': false, 'name': '建筑', 'layer': 1, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f,59b8ebc6-7903-4a6b-b95a-6e45057258f6', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': 'category', 'root_flag': true, 'root_name': '类别信息', 'parent_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'root_value': null, 'category_id': 'category', 'parent_flag': true, 'parent_name': '类别信息', 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'category', 'uid': '040ab17c-1989-4d45-a277-546586741a3f', 'flag': true, 'name': '类别信息', 'layer': 0, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': null, 'root_flag': true, 'root_name': '类别信息', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'energy', 'uid': 'ba904988-4e7f-4e73-9903-2c1d9d5f4b8a', 'flag': true, 'name': '能源', 'layer': 1, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f,ba904988-4e7f-4e73-9903-2c1d9d5f4b8a', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': 'category', 'root_flag': true, 'root_name': '类别信息', 'parent_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'root_value': null, 'category_id': 'category', 'parent_flag': true, 'parent_name': '类别信息', 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'event', 'uid': '3e31313e-6324-47df-939a-e8af15bad552', 'flag': true, 'name': '事件类型', 'layer': 1, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f,3e31313e-6324-47df-939a-e8af15bad552', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': 'category', 'root_flag': true, 'root_name': '类别信息', 'parent_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'root_value': null, 'category_id': 'category', 'parent_flag': true, 'parent_name': '类别信息', 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'info', 'uid': 'cf7eba40-a6b4-471f-9678-301bbd8e1523', 'flag': true, 'name': '属性信息', 'layer': 0, 'value': null, 'branch': 'cf7eba40-a6b4-471f-9678-301bbd8e1523', 'root_id': 'info', 'root_uid': 'cf7eba40-a6b4-471f-9678-301bbd8e1523', 'parent_id': null, 'root_flag': true, 'root_name': '属性信息', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'infoset', 'uid': 'b8488794-9985-4d64-b70c-9396e4352f20', 'flag': true, 'name': '属性约束', 'layer': 0, 'value': null, 'branch': 'b8488794-9985-4d64-b70c-9396e4352f20', 'root_id': 'infoset', 'root_uid': 'b8488794-9985-4d64-b70c-9396e4352f20', 'parent_id': null, 'root_flag': true, 'root_name': '属性约束', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'menu', 'uid': '2658127b-285d-4116-aae5-44ae872088c5', 'flag': true, 'name': '系统菜单', 'layer': 0, 'value': null, 'branch': '2658127b-285d-4116-aae5-44ae872088c5', 'root_id': 'menu', 'root_uid': '2658127b-285d-4116-aae5-44ae872088c5', 'parent_id': null, 'root_flag': true, 'root_name': '系统菜单', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'role', 'uid': '9cc85718-2bb5-4313-b9bc-1d61d06990ec', 'flag': true, 'name': '系统角色', 'layer': 0, 'value': null, 'branch': '9cc85718-2bb5-4313-b9bc-1d61d06990ec', 'root_id': 'role', 'root_uid': '9cc85718-2bb5-4313-b9bc-1d61d06990ec', 'parent_id': null, 'root_flag': true, 'root_name': '系统角色', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'skin', 'uid': 'f8fd64bb-f8d5-4ca5-9ce8-e575d34a0aa2', 'flag': true, 'name': '系统皮肤', 'layer': 0, 'value': null, 'branch': 'f8fd64bb-f8d5-4ca5-9ce8-e575d34a0aa2', 'root_id': 'skin', 'root_uid': 'f8fd64bb-f8d5-4ca5-9ce8-e575d34a0aa2', 'parent_id': null, 'root_flag': true, 'root_name': '系统皮肤', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'system', 'uid': 'c9c8a091-9c39-4060-ad77-ffc14f5903fc', 'flag': true, 'name': '系统信息', 'layer': 0, 'value': null, 'branch': 'c9c8a091-9c39-4060-ad77-ffc14f5903fc', 'root_id': 'system', 'root_uid': 'c9c8a091-9c39-4060-ad77-ffc14f5903fc', 'parent_id': null, 'root_flag': true, 'root_name': '系统信息', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'account', 'uid': '16716631-b167-420d-86ef-2d0794d99db6', 'flag': true, 'name': '系统帐号', 'layer': 0, 'value': null, 'branch': '16716631-b167-420d-86ef-2d0794d99db6', 'root_id': 'account', 'root_uid': '16716631-b167-420d-86ef-2d0794d99db6', 'parent_id': null, 'root_flag': true, 'root_name': '系统帐号', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'ui', 'uid': '2a16a348-95cf-4772-b7bb-be6434bd0af7', 'flag': true, 'name': '用户界面', 'layer': 0, 'value': null, 'branch': '2a16a348-95cf-4772-b7bb-be6434bd0af7', 'root_id': 'ui', 'root_uid': '2a16a348-95cf-4772-b7bb-be6434bd0af7', 'parent_id': null, 'root_flag': true, 'root_name': '用户界面', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'function', 'uid': '171b88c9-8b75-49ea-80f8-fb88f04299ce', 'flag': false, 'name': '运行接口', 'layer': 0, 'value': null, 'branch': '171b88c9-8b75-49ea-80f8-fb88f04299ce', 'root_id': 'function', 'root_uid': '171b88c9-8b75-49ea-80f8-fb88f04299ce', 'parent_id': null, 'root_flag': false, 'root_name': '运行接口', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'state', 'uid': '11311de3-ef4c-41bb-bac7-f5d14aae599b', 'flag': true, 'name': '运行状态', 'layer': 0, 'value': null, 'branch': '11311de3-ef4c-41bb-bac7-f5d14aae599b', 'root_id': 'state', 'root_uid': '11311de3-ef4c-41bb-bac7-f5d14aae599b', 'parent_id': null, 'root_flag': true, 'root_name': '运行状态', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'station', 'uid': 'da6419e8-da21-4810-b61a-7b47b215bcb9', 'flag': false, 'name': '站点', 'layer': 1, 'value': null, 'branch': '040ab17c-1989-4d45-a277-546586741a3f,da6419e8-da21-4810-b61a-7b47b215bcb9', 'root_id': 'category', 'root_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_id': 'category', 'root_flag': true, 'root_name': '类别信息', 'parent_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'root_value': null, 'category_id': 'category', 'parent_flag': true, 'parent_name': '类别信息', 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null },
        { 'id': 'organiz', 'uid': '0718f3e8-6bf3-4536-b8d8-af362ad920f7', 'flag': false, 'name': '组织机构', 'layer': 0, 'value': null, 'branch': '0718f3e8-6bf3-4536-b8d8-af362ad920f7', 'root_id': 'organiz', 'root_uid': '0718f3e8-6bf3-4536-b8d8-af362ad920f7', 'parent_id': null, 'root_flag': false, 'root_name': '组织机构', 'parent_uid': null, 'root_value': null, 'category_id': 'category', 'parent_flag': null, 'parent_name': null, 'previous_id': null, 'category_uid': '040ab17c-1989-4d45-a277-546586741a3f', 'parent_value': null, 'previous_uid': null, 'category_flag': true, 'category_name': '类别信息', 'previous_flag': null, 'previous_name': null, 'category_value': null, 'previous_value': null }
      ],
      showIcon: false,
      filterValue: null,
      treeModel: true,
      expand: false,
      listModel: true,
      placeholder: '输入关键字',
      showFilter: true,
      showFooter: true,
      showTaggle: true,
      tableModel: false,
      tableTemplate: {
        flag: {
          name: '标识'
        },
        id: {
          name: 'ID'
        },
        name: {
          name: '名称'
        }
      },
      tileModel: false,
      treeTemplate: {
        key: 'item_uid',
        label: 'name',
        parent: 'parent_uid'
      }
    }
  }
}
</script>

<style>
  .test{
    background: #fff;
  }
</style>
